<template>
  <div id="fl">
      <div class="fl_hader">
          <div class="fl_hader2">
            <router-link :to="{
            name:'Home'
            }">
            <img src="../assets/zuo.png" alt="">
            </router-link>
          </div>
            <div class="fl_hader3">
              <span>分类</span>
          </div>
      </div>
      <div class="fl_hader4">
          <ul>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
              <li><span>全部</span></li>
          </ul>
      </div>
      <div class="fl_hader5">
          <ul>
              <li><span>全部</span></li>
              <li><span>完结</span></li>
              <li><span>连载</span></li>
          </ul>
      </div>
            <div class="fl_hader6">
          <ul>
              <li><span>全部</span></li>
              <li><span>免费</span></li>
              <li><span>付费</span></li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.fl_hader{
    height: 2.345625rem /* 37.53/16 */;
    /* background-color: pink; */
    background-color: #fff;
}
.fl_hader2{
    width: 2.3125rem /* 37/16 */;
    height: 2.3125rem /* 37/16 */;
    /* border: 1px solid black; */
    float: left;
}
.fl_hader2 img{
    width: 2.75rem;
    height: 2.75rem;
    margin: -.1875rem /* 3/16 */ -.1875rem /* 3/16 */;
}
.fl_hader3{
    width: 2.3125rem /* 37/16 */;
    height: 2.3125rem /* 37/16 */;
    /* border: 1px solid black; */
    float: left;
    margin-left: 8.125rem /* 130/16 */;
    text-align: center;
    line-height: 2.1875rem /* 35/16 */;
}
.fl_hader4{
    height: 100px;
    /* background-color: pink; */
}
.fl_hader4 ul li{
    width: 62px;
    height: 33px;
    /* border: 1px solid black; */
    float: left;
    text-align: center;
    line-height: 30px;
}
.fl_hader4 ul li span{
    font-size: .875rem;
    color: #ccc;
    /* color: black; */
}
.fl_hader5{
    height: 30px;
    /* background-color: pink; */
}
.fl_hader5 ul li{
    width: 62px;
    height: 29px;
    /* border: 1px solid black; */
    float: left;
    line-height: 30px;
    text-align: center;
}
.fl_hader5 ul li span{
    font-size: .875rem;
    color: #ccc;
}
.fl_hader6{
    height: 30px;
    /* background-color: pink; */
}
.fl_hader6 ul li{
    width: 62px;
    height: 29px;
    /* border: 1px solid black; */
    float: left;
    line-height: 30px;
    text-align: center;
}
.fl_hader6 ul li span{
    font-size: .875rem;
    color: #ccc;
}
</style>